<template>
  <app-page card full>
    <template #header v-if="$route.query.from">账号管理</template>
    <app-page-main>
      <template #header>
        <div class="app-query"></div>
        <div class="app-action">
          <el-button plain icon="plus" type="primary" @click="appHandleAdd()">添加</el-button>
        </div>
      </template>
      <el-table :data="appList" stripe style="width: 100%" @selection-change="appHandleSelectionChange">
        <el-table-column prop="username" label="账号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="mobile" label="手机号" show-overflow-tooltip></el-table-column>
        <el-table-column label="用户角色" show-overflow-tooltip>
          <template #default="scope">
            <template v-if="scope.row.role">{{ scope.row.role.roleName }}</template>
          </template>
        </el-table-column>
        <el-table-column label="用户状态">
          <template #default="scope">
            <el-switch :before-change="() => appHandleUpdate(scope.row, { isOpen: !scope.row.isOpen }, !scope.row.isOpen ? '确认上线？' : '确认下线？', '已修改')" v-model="scope.row.isOpen"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" icon="edit" @click="appHandleEdit(scope.row)">编辑</el-button>
            <el-button link type="primary" icon="refresh" @click="hanldeResetPassword(scope.row.adminId)">重置密码</el-button>
            <el-button link type="primary" icon="delete" @click="appHandleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <div class="app-toolbar" v-if="$route.query.from">
        <el-button type="primary" @click="$router.go(-1)">返回</el-button>
      </div>
      <el-pagination @size-change="appHandleSizeChange" @current-change="appHandlePageChange" :current-page="appPage" :page-size="appPageSize" layout="total, sizes, prev, pager, next, jumper" :total="appTotal"></el-pagination>
    </template>

    <!-- 弹窗新增/编辑内容 -->
    <app-dialog-edit width="500px" v-model="appShowDetail" :detail="appDetail" :json="formJson" @change="appInit"></app-dialog-edit>
  </app-page>
</template>

<script>
import { mixins } from 'jax-node'

export default {
  mixins: [mixins.pageList],
  data() {
    return {
      // 默认查询参数
      appQuery: {
        systemType: this.$route.query.systemType,
        sourceId: this.$route.query.sourceId,
      },

      roleList: [], // 角色列表
      departmentList: [], // 部门列表
    }
  },
  computed: {
    formJson() {
      const fixed = false
      const required = true
      return [
        { name: 'username', label: '账号', required },
        { name: 'mobile', label: '手机号', inputAttr: { 'auto-complete': 'new-password' } },
        { name: 'password', label: '用户密码', type: 'password', placeholder: this.appDetail[this.appId] ? '不修改请留空' : '不填写使用默认密码', inputAttr: { autocomplete: 'new-password' } },
        { name: 'roleId', label: '用户角色', type: 'select', options: this.roleList, required },
        { name: 'departmentId', label: '组织架构', type: 'select', options: this.departmentList },
      ]
    },
  },
  created() {
    this.getRoleList()
    this.departmentListRes()
  },
  methods: {
    // 重置密码
    hanldeResetPassword(adminId) {
      this.$http
        .post(`/system/user/reset-password`, {
          adminId,
        })
        .then(() => {
          this.$message.success('重置成功')
        })
    },

    // 初始化之前
    appBeforeReady() {
      const { query } = this.$route

      if (query.from) {
        this.appQuery.sourceId = query.sourceId
        this.appQuery.systemType = query.systemType
      }
    },

    // 获取系统角色
    getRoleList() {
      this.$http('/system/role', {
        params: {
          isOpen: true,
          systemType: this.$route.query.systemType,
          sourceId: this.$route.query.sourceId,
        },
      }).then((ret) => {
        // 转换格式支持jax-from组件
        this.roleList = ret.data.list.map((item) => {
          return {
            ...item,
            label: item.roleName,
            value: item.roleId,
          }
        })
      })
    },

    // 获取部门列表
    departmentListRes() {
      this.$http
        .get(`/system/department`, {
          params: {
            systemType: this.$route.query.systemType,
            sourceId: this.$route.query.sourceId,
          },
        })
        .then((res) => {
          this.departmentList = res.list.map((item) => {
            return { label: item.departmentName, value: item.departmentId }
          })
        })
    },

    // 取数据前
    appBeforeFetch(detail) {
      if (!detail[this.appId]) {
        const { query } = this.$route

        if (query.from) {
          detail.systemType = query.systemType
          detail.sourceId = query.sourceId
          // detail.sourceType = query.systemType
        }
      }
    },
  },
}
</script>

<style></style>
